import { computed, CSSProperties, ref } from "vue";
import { PickerProps } from "./pickerProps";

export function useEntryStyles(props: PickerProps) {
    const panelShow = ref<boolean>(false)
    const hexValue = ref<string>('#ff0000')
    const entryStylesActual = computed<CSSProperties>(() => {
        let styles: CSSProperties = {}
        if (!panelShow.value)
            styles.boxShadow = 'none'
        if (props.entryStyles) {
            Object.assign(styles, props.entryStyles)
        }
        if (panelShow.value) {
            styles.transition = '0s'
            Object.assign(styles, props.entryActiveStyles)
        }
        styles.backgroundColor = hexValue.value
        return styles
    })
    function closePanel() {
        panelShow.value = false
    }

    let openDelayTimer = 0
    function togglePanel() {
        if(props.entryRespondDelay){
            window.clearTimeout(openDelayTimer)
            if(!panelShow.value){
                openDelayTimer = window.setTimeout(()=>{
                    panelShow.value=true
                }, props.entryRespondDelay)
                return
            }
        }
        panelShow.value = !panelShow.value
    }

    return { hexValue, panelShow, closePanel, togglePanel, entryStylesActual }
}